<template>
<div class="arg-list-root">
  <div class="panel" :class="{active: simplify}">
    <div class="panelItem large datePanel">
      <div class="head">监测时间</div>
      <div class="body">
        <el-date-picker
        style="margin-right:0"
          v-model="timerange[0]"
          type="datetime"
          :picker-options="pickerBeginDateafter"
          placeholder="选择日期时间">
        </el-date-picker>
        <div class="gang"></div>
        <el-date-picker
          v-model="timerange[1]"
          type="datetime"
          :picker-options="pickerBeginDateBefore"
          placeholder="选择日期时间">
        </el-date-picker>
        <el-button @click="getmessage()">确定</el-button>
        <DateShow class="date-show"></DateShow>
      </div>
    </div>
    <div v-for="(item,index) in condition.radiodata"
      class="panelItem" :class="{small: !item.full}" :key="index">
      <div class="head">{{item.label}}</div>
      <div class="body">
        <RadioButtonGroup :set="item.set"  :checked="item.checked" :datas="item.item"  :sIndex="index"></RadioButtonGroup>
      </div>
    </div>
  </div>
  <div class="filter">
    <div class="head">筛选条件：</div>
    <div class="body"> 
      <!-- 筛选条件 -->
      <div class="filterItem" v-for="(item,index) in condition.radiodata"  v-if="filters.indexOf(item.checked)==-1&&(item.set!=true)" :key="index">
        <span class="body">{{item.checked}}</span>
        <div class="close" @click="deleteScreen(index)">×</div>
      </div>
      <!-- end -->
    </div>
    <input type="button" class="btn save" value="保存" @click="insertCondition()">
    <input type="button" class="btn" value="清空筛选条件" @click="deleteAll()">
    <div class="expand" @click="simplify = !simplify" :class="{active: simplify}">
      展开筛选条件<i class="icon el-icon-d-arrow-left"></i>
    </div>
  </div>
  <!-- <div class="website" v-show="websiteShow">
    <div class="list" :class="{active:cwebSite[condition.websiteId+'']===-1}" @click="topicall()">
      全部({{allnum}})
    </div>
    <div class="list" v-for="(item,index) in webSite" :class="{active:cwebSite[condition.websiteId+'']===index}" 
    @click="isotopic(item,index)" :key="index">
      {{item.websiteName}}&nbsp;(&nbsp;{{types.filter(d => d.key == item.websiteId)[0]==undefined?0:types.filter(d => d.key == item.websiteId)[0].doc_count}}&nbsp;)
    </div>
  </div> -->
  <div class="types">
    <div v-for="(item,index) in webSite" :key="index" :class="{active:index==tindex}" @click="gettypes(item,index)">
      {{item.websiteName}}({{item.doc_count}})
    </div>
  </div>
</div>
</template>

<script>
import moment from 'moment'
import { mapGetters } from 'vuex'
import RadioButtonGroup from 'components/common/RadioButtonGroup'
import DateShow from './DateShow'
let cwebSite={'-1':-1,'0':0,'1':1,'2':2,'3':3,'5':4,'6':5,'9':6,'11':8,'12':8,'13':10,}
export default {
  name: 'arg-list',
  components: {RadioButtonGroup, DateShow},
  data(){
    return {
      websiteShow:false,
      simplify: false,
      filters: ['全部','全部','全部','时间降序','展开','列表'],
      screenCdtion:[],//筛选条件
      webSite:[],
      cwebSite,
      flag:false,
      tindex:0,
      pickerBeginDateBefore: {
        disabledDate: (time) => {
            let beginDateVal = this.timerange[0];
            if (beginDateVal) {
                return time.getTime() < beginDateVal;
            }
        }
      },
      pickerBeginDateafter: {
        disabledDate: (time) => {
            let afterDateVal = this.timerange[1];
            if (afterDateVal) {
                return time.getTime() > afterDateVal;
            }
        }
      },
      n:-1,
      timerange:[],
      prerequisite:[]
    }
  },
  mounted(){
    this.$nextTick(function(){
      this.timerange = [this.condition.startTime,this.condition.endTime]//初始化时间
    })
    //this.getWebSite()//查载体类型
    //this.blocktypes()
    this.queryByOrgCode()//查询信息
    this.getdirect()
    console.log(this.$store.state.Info.types)
  },
  computed: {
    allnum(){
      let n =0
      this.types.map(d => n+= d.doc_count )
      return n
    },
    //所有条件
    condition(){
        return this.$store.state.Info.condition
    },
    speg(){
        return this.$store.state.Info.peg
    },
    getid(){
        return this.$store.state.Info.id//用户信息ID
    },
    count(){
      return this.$store.state.Info.websiteId
    },
    types(){
      this.webSite = this.$store.state.Info.types
      return this.$store.state.Info.types
    }
    
  },
  watch:{
    condition:{
      handler:function(val,oldVal){
          this.timerange=[this.condition.startTime,this.condition.endTime]
        },
      deep:true
    },
    types:{
      handler:function(val,oldVal){
          this.blocktypes()
        },
      deep:true
    }
  },
  methods:{
    //监测网站
    async getdirect(){
      let res = await this.$http.post('vrv-monitor-platform-web/whitelist/queryByWebsite',{
        pageNum:1,
        pageSize:10
      }) 
      if(res.body.success == true){
        if(res.body.data.length<1){
          return
        }
        let text = res.body.data[0].website.substring(0,5)
        this.condition.radiodata[6].item.length = 0
        this.condition.radiodata[6].item.push(text)
        this.condition.radiodata[6].checked = text
      }
    },
    blocktypes(){
      this.uptypes = this.types
      let t = this.uptypes.reduce((a,d) => a+parseInt(d.doc_count),0)
      this.webSite =  this.webSite.map(d => ({
        websiteName:d.websiteName,
        doc_count : d.doc_count,
        websiteId : d.websiteId
      }))
      // this.webSite.unshift({
      //   websiteName:'全部',
      //   doc_count:t,
      //   websiteId:'-1'
      // })
    },
    gettypes(item,index){
      this.condition.websiteId = item.websiteId
      this.tindex = index
    },
    getmessage(){
      this.$store.commit('UPDATE',{
        startTime:this.timerange[0]||moment().startOf('day'),
        endTime:this.timerange[1]||moment(),
      });
    },
    // 查询筛选条件
    queryByOrgCode(){
      this.$http.get('vrv-monitor-platform-web/factor/queryByOrgCode').then(res=>{
        if(res.body.message=='无保存的筛选条件'){
          this.$store.dispatch('qMessage',{
            that:this,
            first:true
          });
          this.$store.dispatch('queryTypes',{
            that:this,
            first:true
          });
        }else{
          if(res.body.success==true){
            this.$store.dispatch('querycondition',res.body.data)
            this.$nextTick(function(){
              this.flag = true
            })
          }
        }
      })
    },
    // 保存条件
    insertCondition(){
        // this.$store.commit('LoadingTrue');
        let out = 'poTime' //_score
        let ch1 = {'负面':2,'正面':1,'中性':0,'全部':-1}//正负面0
        let ch2 = {'全部':-1,'全国':2,'本地':1,'境外':3}//监测范围1
        let ch3 = {'已阅':1,'未阅':0,'全部':-1}//浏览2
        let ch4 = {'时间升序':['poTime','asc'],'时间降序':['poTime','desc'],'相关性排序':['_score','desc']}//时间排序3
        let ch5 = {'合并':1,'展开':0} //相似4
        this.$http.post('vrv-monitor-platform-web/factor/insert',{
          positiveOrNegative:ch1[this.condition.radiodata[0].checked],//正负面参数
          readed:ch3[this.condition.radiodata[2].checked],//是否已阅
          similar:ch5[this.condition.radiodata[4].checked],//相似文章参数
          sortType:ch4[this.condition.radiodata[3].checked][1],//时间排序
          website:this.condition.websiteId,//载体
          monitorStartTime:moment(this.condition.startTime).format('YYYY-MM-DD HH:mm:ss'),//开始时间
          monitorEndTime:moment(this.condition.endTime).format('YYYY-MM-DD HH:mm:ss'),//结束时间
          monitorScope:ch2[this.condition.radiodata[1].checked],//监测范围
          sortField:ch4[this.condition.radiodata[3].checked][0],
        }).then(res=>{
          if (res.body.success==true) {
              this.$message.success('保存成功')
              this.$store.commit('Loadingfalse');
            }
            
        })
    },
    // 删除筛选条件
    deleteScreen(index){
      // this.$store.commit('LoadingTrue');
      this.$store.commit('delScreenings',{
        index:index
      });
    },
    // 删除所有删选条件
    deleteAll(){
      this.$store.dispatch('deleteAll')
      if(this.condition.id!=''){
        this.$http.post('vrv-monitor-platform-web/factor/delete',{
          id:this.condition.id
        }).then(r=>{
          if(r.body.success==true){
            this.$message.success('清空成功')
          }
        })
      }
    },
    // 查詢篩選條件
    queryScreen(){
      this.$store.commit('qScreenings',{
        that:this
      });
    },

    // // 载体类型  接口重构了不再需要
    // async getWebSite(){
    //   let res = await this.$http.get('vrv-monitor-platform-web/data/queryTodayOpinion?aggsField=webSiteType&positiveOrNegative=-1')
    //   let data = res.body.data
    //   let all = data.reduce((a, d) => a + parseInt(d.doc_count), 0)
    //   data.unshift({
    //     websiteName:'全部',
    //     doc_count:all,
    //     websiteId:'-1'
    //   })
    //   this.webSite = data
    //   // 2017 11-22  接口重复调用 
    //   // this.$store.dispatch('queryTypes',{
    //   //   that:this,
    //   //   first:true
    //   // })
    //   // console.log(data)
    // },
    isotopic(item,index){
      this.n = index
      this.$store.commit('UPWEBSITEID',{
        websiteId:item.websiteId
      })
    },
    topicall(){
      this.n = -1
      this.$store.commit('UPWEBSITEID',{
        websiteId:-1
      })
    }
  }
}
</script>

<style lang="stylus" scoped> 
argH = 3.2rem
argHL = 4.5rem
wrapH = round(argHL + 4 * argH, 1)
  
.gang
  display inline-block 
  width 15px
  height 3px
  background #898989
  margin 0 3px;
  transform translateY(-1.5px)
.panel
  border-right 0
  box-shadow 0 1px 5px #dcdcdc
  position relative
  overflow hidden
  transition all .3s ease
  height 'calc(%s + 2px)' % wrapH
  &.active
    height argHL

.panelItem
  height argH
  line-height @height
  font-size 0.88rem
  overflow hidden
  float left
  border-bottom 1px solid #dcdcdc
  width 100%
  font-size 0.88rem
  &.small
    width 50%
  &.large
    height argHL
    line-height @height
  >.head
    background #f4f4f4
    box-sizing border-box
    width 6.8rem
    height 100%
    padding-left 1.5rem
    float left
  >.body
    margin-left 6.8rem
    padding-left 1.5rem



.datePanel>.body
  >.el-date-editor
    width 14rem
    line-height 1
    margin-right 1rem
  >.date-show
    float right


.filter
  height 3.2rem
  line-height @height
  position relative
  >.head
    width 6.8rem
    box-sizing: border-box
    padding-left 1.5rem
    font-size 0.88rem
    float left
    color #666666
  >.body
    margin-left 6.8rem
  >.btn
    position absolute
    top .6rem
    right 13rem
    height 2rem
    border 1px solid #026bd6
    background white
    border-radius 4px
    color #026bd6
    padding 0 1rem
    outline none
    cursor pointer
  >.btn.save
    right 21rem
  >.expand
    position absolute
    top 0px
    right 1.4rem
    font-size .88rem
    height 2.4rem
    line-height 2.8rem
    border 1px solid #dcdcdc
    border-top 0
    box-shadow 0 2px 2px #dcdcdc
    padding 0 1.6rem
    background white
    border-bottom-right-radius .5rem
    border-bottom-left-radius .5rem
    color #666666
    cursor pointer
    >.icon
      margin-left 10px
      transition all .8s ease
      transform rotate(90deg)
    &.active>.icon
      transform rotate(-90deg)

.filterItem
  display inline-block
  height 2rem
  box-sizing border-box
  padding .18rem
  border-radius (@height / 2)
  line-height 1.5rem
  font-size 0.88rem
  min-width 4rem
  margin 0 .5rem
  background white
  >.body
    margin-left 1rem
  >.close
    float right
    height 1.5rem
    width 1.5rem
    color #cecdcd
    border-radius (@height / 2)
    text-align center
    line-height 1.0rem
    font-size 1.4rem
    cursor pointer
    transform: translateY(1px)
.website
  height 3.1rem
  border-top 1px solid #dcdcdc
  background #eeeeee
  font-size 0
  display flex
  >div
    display inline-block
    width 7.5rem
    height 100%
    line-height 3.1rem
    font-size 0.88rem
    text-align center
    border-left 1px solid #dcdcdc
    cursor pointer
    flex auto
    white-space nowrap
    &:last-child
      border-right 1px solid #dcdcdc
    &.active
      background #e85a47
      color #fff 
.types
  display flex
  height 48px
  border 1px
  border-top 1px solid #dcdcdc
  border-bottom 1px solid  #dcdcdc
  >div
    flex 1
    background #eee
    text-align center
    line-height 48px
    border-left 1px solid #dcdcdc
    cursor pointer
    &:last-child
      border-right 1px solid #dcdcdc
    &.active
      background #e85a47
      color #fff


@media screen and (max-width: 1500px) 
    .datePanel
      >.body 
        >.el-date-editor
          width 12.5rem
@media screen and (max-width: 1258px) 
    .datePanel
          >.body 
            >.el-date-editor
              width 15rem


</style>